import React, { useState } from 'react';
import { Tabs } from 'antd';
import "./Stuff.css";

// 素材分类数据
const materialCategories = {
  shape: {
    name: '形状',
    items: [
      { id: 's1', name: '矩形', img: 'https://img1.baidu.com/it/u=1234567890,1234567890&fm=253&fmt=auto&app=138&f=JPEG?w=100&h=100' },
      { id: 's2', name: '圆形', img: 'https://img1.baidu.com/it/u=2345678901,2345678901&fm=253&fmt=auto&app=138&f=JPEG?w=100&h=100' },
      { id: 's3', name: '三角形', img: 'https://img1.baidu.com/it/u=3456789012,3456789012&fm=253&fmt=auto&app=138&f=JPEG?w=100&h=100' },
      { id: 's4', name: '星形', img: 'https://img1.baidu.com/it/u=4567890123,4567890123&fm=253&fmt=auto&app=138&f=JPEG?w=100&h=100' },
      { id: 's5', name: '六边形', img: 'https://img1.baidu.com/it/u=5678901234,5678901234&fm=253&fmt=auto&app=138&f=JPEG?w=100&h=100' },
    ]
  },
  line: {
    name: '线条',
    items: [
      { id: 'l1', name: '直线', img: 'https://img1.baidu.com/it/u=6789012345,6789012345&fm=253&fmt=auto&app=138&f=JPEG?w=100&h=100' },
      { id: 'l2', name: '曲线', img: 'https://img1.baidu.com/it/u=7890123456,7890123456&fm=253&fmt=auto&app=138&f=JPEG?w=100&h=100' },
      { id: 'l3', name: '波浪线', img: 'https://img1.baidu.com/it/u=8901234567,8901234567&fm=253&fmt=auto&app=138&f=JPEG?w=100&h=100' },
      { id: 'l4', name: '虚线', img: 'https://img1.baidu.com/it/u=9012345678,9012345678&fm=253&fmt=auto&app=138&f=JPEG?w=100&h=100' },
      { id: 'l5', name: '双线', img: 'https://img1.baidu.com/it/u=0123456789,0123456789&fm=253&fmt=auto&app=138&f=JPEG?w=100&h=100' },
    ]
  },
  arrow: {
    name: '箭头',
    items: [
      { id: 'a1', name: '右箭头', img: 'https://img1.baidu.com/it/u=1234567890,1234567890&fm=253&fmt=auto&app=138&f=JPEG?w=100&h=100' },
      { id: 'a2', name: '左箭头', img: 'https://img1.baidu.com/it/u=2345678901,2345678901&fm=253&fmt=auto&app=138&f=JPEG?w=100&h=100' },
      { id: 'a3', name: '双向箭头', img: 'https://img1.baidu.com/it/u=3456789012,3456789012&fm=253&fmt=auto&app=138&f=JPEG?w=100&h=100' },
      { id: 'a4', name: '弯曲箭头', img: 'https://img1.baidu.com/it/u=4567890123,4567890123&fm=253&fmt=auto&app=138&f=JPEG?w=100&h=100' },
      { id: 'a5', name: '环形箭头', img: 'https://img1.baidu.com/it/u=5678901234,5678901234&fm=253&fmt=auto&app=138&f=JPEG?w=100&h=100' },
    ]
  }
};

function Stuff() {
  const [activeCategory, setActiveCategory] = useState('shape');

  // 处理素材项点击
  const handleItemClick = (item: { id: string; name: string; img: string }) => {
    // TODO: 实现素材项点击后的处理逻辑
    console.log('Selected item:', item);
  };

  return (
    <div className="stuff-container">
      <Tabs
        activeKey={activeCategory}
        onChange={setActiveCategory}
        items={Object.entries(materialCategories).map(([key, category]) => ({
          key,
          label: category.name,
          children: (
            <div className="material-grid">
              {category.items.map(item => (
                <div
                  key={item.id}
                  className="material-item"
                  onClick={() => handleItemClick(item)}
                >
                  <img src={item.img} alt={item.name} />
                  <span>{item.name}</span>
                </div>
              ))}
            </div>
          ),
        }))}
      />
    </div>
  );
}

export default Stuff;
